<%--
  Created by IntelliJ IDEA.
  User: 71027
  Date: 2019/4/26
  Time: 22:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
    <%----%>
    <%--不需要？？？【？】--%>
    <%--<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>--%>
    <%----%>

    <%--这里面有bootstrap等，但是这里要使用冲突--%>
    <%--这样.container .abc的优先级就大于了.abc【细化。】--%>
    <%--在细化CSS里面，只要在样式后面加一个!important--%>
    <%--.abc 【{background:#fff !improtant;}】这样。默认提升到顶级--%>


    <%--关于导入。【导入有无，ctrl确认一下。【上面！！【重复代码删除！！！】。】】--%>


    <%--javax.servlet.jsp.PageContext这是什么代码？用来干嘛的？javax？？？--%>

    <%--三个文件导入完毕。【】--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/mytest/static/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/mytest/static/css/weadmin.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/my.css">
    <%--导入一个自己的。--%>
    <script src="${pageContext.request.contextPath}/mytest/lib/layui/layui.js" charset="utf-8"></script>
    <%--空格？？--%>
    <%--这样好了？？？【莫名其妙又好了？？？（不懂，我没做什么。（延迟？？））】--%>

    <%--图片无法识别？？？【CSS】里面调用？不行？【在这里调用？】--%>
    <%--只能在html调用图片？？？【如何？？】--%>

    <%--如果此css与页面不在一个目录下 那么背景的路径将会改变 希望留意一下【这个问题？？？（？）】【；你的背景图片路径是相对这个css文件的来说的，而不是html文件】--%>

    <%--把bootstrap放在优先。--%>
    <%@include file="common/common.jsp" %>


    <%--自己写一个图片试试？？？--%>
    <style type="text/css">
        /*body {
            background: url(

        <%--${pageContext.request.contextPath}--%>

        /mytest/static/images/bg.png) no-repeat center;
                    !*这个也不行？？？。。*!
                    !*background: #8a6d3b;*!
                    !*这个url要用那个写？【找不到资源？？？【why？？？】*!
                    background-size: cover;
                    overflow: hidden;
                }*/
    </style>


    <%--背景突然好了。--%>
</head>

<body class="login-bg">

<%--加上。【成功。自己好了？】--%>
<%-- class="login-bg"先删掉。。--%>
<%--这里用到背景图，？不行？【导入当前页面？】--%>

<%--<div>
    <span class="glyphicon glyphicon-music" style="color: rgb(255, 140, 60); text-shadow: rgb(255, 0, 0) 10px 3px 10px;"> Music</span>
</div>--%>
<%--自动生成的图标。--%>
<div class="login">
    <div class="message">宠物管理平台</div>
    <div id="darkbannerwrap"></div>
    <%--todo 图片无法加载。--%>

    <form class="layui-form">


        <%--自己的。多个div复合。--%>
        <div class="form-group">
            <%--<label>用户ID：</label>--%>
            用户ID：
            <%--??label样式？？--%>
            <div>
                <input id="userid" type="text" name="userid" value="xxx"
                       placeholder="用户ID"/>
                <span id="useridspan"></span>
            </div>
        </div>

        <div class="form-group">
            <span>密码：</span>
            <%--<label class="col-sm-2 control-label">密码：</label>--%>
            <div>
                <input id="password" type="text" name="password"
                       value="xxx" placeholder="密码" class="layui-input"/>
            </div>
        </div>


        <%--修饰单选按钮。【专门找。自己填充。？】--%>
        <div class="form-group">
            <span>身份：</span>
            <%--<label>身份：</label>--%>

            <%----%>
            <label for="管理员" class="radio">
                <%--for是什么意思？？？--%>
                <span class="radio-bg"></span>
                <input type="radio" name="identity" id="管理员" value="1"/> 管理员
                <%--id可以为中文？label的for是用来干什么？label是什么？一般用来干什么？--%>
                <span class="radio-on"></span>
            </label>
            <label for="用户" class="radio">
                <span class="radio-bg"></span>
                <input type="radio" name="identity" id="用户" value="2" checked="checked"/> 用户
                <span class="radio-on"></span>
            </label>
            <%----%>
        </div>
    </form>
    <%--表单外。--%>


    <div align="center">
        <button type="button" onclick="verify()" class="btn btn-primary">
            <span class="glyphicon glyphicon-user"></span> 登陆
        </button>
        <a class="a-hover" style="color: orange"
           href="http://localhost:8080/Github_war_exploded/user/registerpage">我要注册</a>
        <%--为什么没有悬停效果？？？？--%>
    </div>
    <div align="center" id="prompt"></div>
</div>

<script type="text/javascript">
    function verify() {
        var checkempty = false;
        var data = {};
        var t = $('form').serializeArray();
        $.each(t, function () {
            if (this.value === "") {
                checkempty = true;//表示不符合。
            }
            data [this.name] = this.value;
        });
        data["online"] = false;
        if (checkempty) {
            /*所以return不能写在，$.each下面？？？*/
            var useridspan = document.getElementById("useridspan");
            useridspan.innerHTML = "不能为空。";
            useridspan.style.color = "red";
            return false;
        }
        $.ajax({
            url: "http://localhost:8080/Github_war_exploded/user/verify",
            type: "POST",
            data: data,
            success: function (data) {
                if (data.endsWith("false")) {
                    /*要改？boolean到String不需要toString？【测试？？？】*/
                    /*错误。*/
                    var x = document.getElementById("prompt");
                    x.style.color = "red";
                    x.innerText = '该用户类型下，用户名或者密码错误';

                } else {/*正确*/
                    var userid = $("#userid").val();

                    if (data.toString().endsWith("administrator")) {
                        window.location.href = "http://localhost:8080/Github_war_exploded/user/personal?userid=" + userid + "&identity=" + data.toString();
                        /*【测试，有没有用。】*/
                    } else {
                    }
                    window.location.href = "http://localhost:8080/Github_war_exploded/user/personal?userid=" + userid + "&identity=" + data.toString();
                }
            }, error: function (msg) {
                alert('ajax error');
                console.log(msg);
            }
        });
    }
</script>


</body>
</html>